<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>react</title>
<script src="../../s/react/16.13.1/react.production.min.js"></script>
<script src="../../s/react/16.13.1/react-dom.production.min.js"></script>
<script src="../../s/babel/5.8.38/browser.min.js"></script>
</head>
<body>
	<div id="root"></div>
	<script type="text/babel">
		// 在 React 里，HTML 表单元素的工作方式和其他的 DOM 元素有些不同，这是因为表单元素通常会保持一些内部的 state。
		// 在 HTML 中，表单元素（如<input>、 <textarea> 和 <select>）之类的表单元素通常自己维护 state，并根据用户输入进行更新。
		// 而在 React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用 setState()来更新。
		// 可以把两者结合起来，使 React 的 state 成为“唯一数据源”。渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。（监听变化然后更新状态）
		// 被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”。
		class NameForm extends React.Component {
			constructor(props) {
				super(props);
				this.state = {value: '',message: ''};
				this.handleChange = this.handleChange.bind(this);
				this.handleSubmit = this.handleSubmit.bind(this);
			}
			handleChange(event) {
				this.setState({
					value: event.target.value
				});
			}
			handleSubmit(event) {
				let message = 'Name is: ' + this.state.value;
				alert(message);
				this.setState({
					message: message
				}); 
				event.preventDefault();
			}
			render() {
				return (
					<form onSubmit={this.handleSubmit}>
						<label>
							Name：
							<input type="text" value={this.state.value} onChange={this.handleChange} />
						</label>
						<input type="submit" value="Submit" />
						<div>{this.state.message}</div>
					</form>
				);
			}
		}
		ReactDOM.render(
			<NameForm />,
			document.getElementById('root')
		);
	</script>
</body>
</html>